<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.wrapper {
				width: 0px;
				height: 0px;
				border-width: 20px 20px 20px 20px;
				border-style: solid;
				border-color: red pink green yellow;
			}

			.box {
				width: 0px;
				height: 0px;
				border-left: 50px solid transparent;
				/* 透明*/
				border-right: 50px solid transparent;
				border-bottom: 100px solid red;
			}

			.main {
				width: 200px;
				height: 200px;
				border: pink 2px solid;
				position: relative;
				margin-top: 50px;
			}
			.main::before {
				content: "";
				border-style: solid;
				border-color:  transparent transparent pink;
				border-width: 20px 20px 20px 20px;
				position: absolute;
				top: -40px;
				left: 50px;
			}

			.main::after {
				content: "";
				border-style: solid;
				border-color: transparent transparent #fff;
				border-width: 20px 20px 20px 20px;
				position: absolute;
				top: -36px;
				left: 50px;
			}
		</style>
	</head>
	<body>
		<div class="wrapper"></div>
		<div class="box"></div>
		<div class="main">
		</div>
		<script type="text/javascript">
			let colors = ["red", "green", "blue"];
			let a=colors.splice(0,3,"yellow","whitw")
			console.log(colors)
			
			let numbers =[{ a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }, { a: 5 }];
			[{ a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }, { a: 5 }].map((item,index,array)=>{
				if(index.a<2){
					item.a*3
				}
			})
			console.log(numbers)
			
			
			let objs = [{ count: 20 }, { count: 66 }, { count: 16 }, { count: 30 }, { count: 5 }, { count: 20 }, { count: 66 }];
			let arrs=objs.map(item=>item.count)
			let newArrs =Array.from(new Set(arrs)).sort((a,b)=>a-b).splice(2)
			console.log(newArrs)
		</script>
	</body>
</html>`
